<template>
  <div>
    <div>
      <BackNav left-text="返回" left-arrow title="订单结算"></BackNav>
    </div>
    <div class="main">
      <div class="wrapper">
        <!-- 选择地址栏 -->
        <div class="top">
          <div class="local">
            <van-cell is-link @click="showPopup">选择地址</van-cell>
          </div>
          <div class="local-bottom" >
            <div class="username">{{defaultAddress.name}}</div>
            <div class="phone">{{defaultAddress.tel}}</div>
            <div class="text" v-if="isDefault==1?true:false">默认</div>
          </div>
          <div class="localtetx">{{defaultAddress.province}}{{defaultAddress.city}}{{defaultAddress.county}}{{defaultAddress.addressDetail}}</div>
        </div>
        <!-- 订单信息栏 -->
        <div class="order-column">
          <div class="order-message">订单信息</div>
          <div
            class="order-item"
            v-for="(item, index) in shoplist"
            :key="index"
          >
            <Order
              :num="item.count"
              :price="item.price"
              :desc="item.enname"
              :title="item.name"
              :thumb="item.small_img"
            ></Order>
          </div>
        </div>
        <!-- 统计信息 -->
        <div class="footer">
          <div class="date">{{ getTime }}</div>
          <div class="date-item">
            <div class="total">
              总共<span>{{ getNum }}</span
              >件
            </div>
            <div class="money">
              合计<span>&yen;{{ getPrice }}</span>
            </div>
          </div>
        </div>
        <!-- 提交按钮 -->
        <div style="margin: 20px 0px">
          <van-button
            round
            block
            color="#0c43ba"
            type="info"
            native-type="submit"
            @click="checkout"
            >立即结算</van-button
          >
        </div>
        <!-- 弹出层 -->
        <div class="popup">
          <van-popup
            v-model="show"
            closeable
            position="bottom"
            :style="{ height: '40%' }"
          >
            <div class="tip">
              <div class="tip-top">选择地址</div>
              <div class="location" v-for="(item,index) in addresslist" :key="index">
                <van-checkbox
                  v-model="item.checked"
                  checked-color="#0c43ba"
                  @click="tab(item)"
                ></van-checkbox>
                <div class="right">
                  <div class="text-right">
                    <div class="username">{{item.name}}</div>
                    <div class="phone">{{item.tel}}</div>
                    <div class="text" v-if="item.isDefault==1?true:false">默认</div>
                  </div>
                  <div class="localtetx">{{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}</div>
                </div>
              </div>
              <div style="margin: 10px" @click="gopage('NewAddress')">
                <van-button
                  round
                  block
                  color="#0c43ba"
                  type="info"
                  native-type="submit"
                  >新增地址</van-button
                >
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BackNav from "../components/BackNav";
import Order from "../components/Order";
export default {
  components: {
    BackNav,
    Order,
  },
  created() {
    this.shoplist = JSON.parse(localStorage.getItem('id'));
    // 
    this.sids = JSON.parse(localStorage.getItem('sids'));
    this.findAddress();

  },
  data() {
    return {
      show: false,
      shoplist: [],
      addresslist:[],
      defaultAddress:[],
      isDefault:'',
      sids:[]
    };
  },
  computed: {
    // 计算价格
    getPrice() {
      let total = 0;
      for (let i = 0; i < this.shoplist.length; i++) {
        total += this.shoplist[i].count * this.shoplist[i].price;
      }
      return total;
    },
    //  计算件数
    getNum() {
      let total = 0;
      for (let i = 0; i < this.shoplist.length; i++) {
        total += this.shoplist[i].count;
      }
      return total;
    },
    // 时间
    getTime() {
      let str = this.shoplist[0].created_at;
      let i = str.indexOf("T");
      let a = str.indexOf(".");
      str = str.slice(0, i) + " " + str.slice(i + 1, a);
      return str;
    },
  },
  methods: {
    // 单选
    tab(item){
      let aid=item.aid;
      for(let i=0;i<this.addresslist.length;i++){
        if(this.addresslist[i].aid==aid){
          this.addresslist[i].checked=true;
          this.defaultAddress=this.addresslist[i];
          this.isDefault=this.addresslist[i].isDefault;
          localStorage.setItem('address',JSON.stringify(this.defaultAddress));
          localStorage.setItem('isDefault',JSON.stringify(this.isDefault));
          // 
        }else{
          this.addresslist[i].checked=false;
        }
      }
     
    },
    showPopup() {
      this.show = true;
    },
    // 跳转到新增地址
    gopage(name){
      this.$router.push({name})
    },
    // 查询地址
    findAddress() {
      this.axios({
        method: "get",
        url: "/findAddress",
      })
        .then((res) => {
          // 
          if(res.data.code==20000){
             for(let i=0;i<res.data.result.length;i++){
               if(res.data.result[i].name.length!=0){
                 res.data.result[i].checked=false;
                  this.addresslist.push(res.data.result[i])
               }
             }
          }
          
          
        })
        .catch((err) => {
          
        });
    },
    // 立即结算
    checkout(){
      if(this.defaultAddress.length==0){
         this.$toast("请输入地址");
         return;
      } 
      let ad=this.defaultAddress.province+this.defaultAddress.city+this.defaultAddress.county+this.defaultAddress.addressDetail;     
      this.axios({
         method:'post',
         url:'/pay',
         data:{
           phone:this.defaultAddress.tel,
           address:ad,
           receiver:this.defaultAddress.name,
           sids: JSON.stringify(this.sids)
         }
      }).then(res=>{
        
        if(res.data.code==60000){
          this.$toast(res.data.msg);
          setTimeout(() => {
            this.$router.push({name:'MyOrder'})
          }, 500);
          
        }
      }).catch(err=>{
        
      })
    }
  },
};
</script>
<style lang="less" scoped>
.main {
  background: #f0f0f0;
  position:absolute;
  top: 46px;
  bottom: 0;
  left: 0;
  right: 0;
  .wrapper {
    padding: 10px;
    .top {
      background: #fff;
      padding: 10px;
      border-radius: 10px;
      .local {
        margin-bottom: 10px;
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 14px;
      }
      .local-bottom {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 0 16px;
        .username {
          color: #0c34ba;
          font-weight: bold;
        }
        .phone {
          margin: 0 20px;
        }
        .text {
          background: #0c43ba;
          color: white;
          border-radius: 10px;
          padding: 0px 8px;
        }
      }
      .localtetx {
        margin-top: 10px;
        font-size: 14px;
        color: #999999;
        padding: 0 16px;
      }
    }
    .order-column {
      background: #fff;
      margin-top: 10px;
      padding: 10px;
      border-radius: 10px;
    }
    .footer {
      padding: 10px;
      background: #fff;
      border-radius: 10px;
      border-top: 2px dashed #f0f0f0;
      .date {
        margin: 5px 0;
      }
      .date-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        .total {
          span {
            margin: 0 5px;
          }
        }
        .money {
          margin-left: auto;
          color: #0c34ba;
          font-weight: bold;
          span {
            margin-left: 10px;
          }
        }
      }
    }
    .popup {
      .tip {
        padding: 15px;
        .tip-top {
          font-size: 16px;
          color: #7a7b7c;
          margin-bottom: 10px;
        }
        .location {
          border-bottom: 2px dashed #e8e8e8;
          display: flex;
          line-height: 2;
          padding: 10px 0;
          &:last-child {
            border: 0;
          }
          .right {
            margin-left: 10px;
            .text-right {
              display: flex;
              align-items: center;
              .username {
                font-size: 16px;
              }
              .phone {
                margin: 0 20px;
                font-size: 16px;
              }
              .text {
                background: #0c43ba;
                color: white;
                border-radius: 10px;
                padding: 0 5px;
              }
            }
            .localtetx {
              font-size: 14px;
              color: #4c4c4c;
            }
          }
        }
      }
    }
  }
}
</style>